import React, { useState } from "react";
import { Button, Modal, Image, Divider, Row, Col } from "antd";
import { Link } from "react-router-dom";
export const Detail = (props) => {
  const [isModalVisible, setVisible] = useState(false);
  const data = props.res;
  const handleClickDetail = () => {
    setVisible(true);
  }
  const handleCancel = () => {
    setVisible(false);
  }
  const Path = {
    pathname: "/ttms/schedule?id=" + data.key,
  }
  return (
    <>
      <Button onClick={handleClickDetail} type="link" >查看</Button>
      <Modal
        title="详情"
        visible={isModalVisible}
        onCancel={handleCancel}
        footer={
          [
            <Button key="cance" onClick={handleCancel}>关闭</Button>,
            <Button key="mod" type="primary">修改</Button>,
            <Button key="addS" type="primary">
              <Link to={Path} onClick={() => {
                window.location = "/ttms/schedule?id=" + data.key;
              }}>查看该电影演出</Link>
            </Button>
          ]
        }
        width={1200}
        centered
      >
        <Row>
          <Col span={18} offset={3}>
            <h1 style={{fontWeight: 600}}>{data.title}</h1>
            <Row gutter={16} wrap={false}>
              <Col flex="none" span={6}>
                <Image
                  width="100%"
                  src={data.cover}
                  fallback=""
                /></Col>
              <Col flex="auto" style={{marginLeft:50, fontSize: 16, display:"flex", flexDirection: "column", justifyContent:"space-around"}}>
                <div><b>地区：</b>{data.area.join("/")}</div>
                <div><b>类型：</b>{data.type.join("/")}</div>
                <div><b>上映日期：</b>{data.releaseDate}</div>
                <div><b>片长：</b>{data.filmLen}分钟</div>
                <div><b>语言：</b>{data.language.join("/")}</div>
                <div><b>评分：</b>{data.rate}</div>

              </Col>
            </Row>
            <Divider orientation="left">演员表：</Divider>
            <div>{data.actor.join("/")}</div>
            <Divider orientation="left" plain>简介</Divider>
            <p>{data.introduction}</p>
          </Col>
        </Row>

      </Modal>
    </>
  )
}